<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-11-01 15:03:03
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2022-01-01 21:54:13
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Document_jsSDK</title>
  <script src="./js/jquery-2.1.1.min.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <style>
    .btn {
      height: 50px;
      line-height: 50px;
      background-color: #69f;
      border: none;
      color: #fff;
      border-radius: 3px;
    }

    .btn_purple {
      background-color: #8870c3;
    }

    .btn_orange {
      background-color: orange;
    }

    .btn_green {
      background-color: #3bb360;
    }

    .text-c {
      text-align: center;
    }
    .tip-box{
      background: #568cf6;
      font-size: 14px;
      padding: 10px;
      color: #fff;
      border-radius: 3px;
    }
  </style>
</head>

<body ontouchstart="">
  <div class="wxapi_container">
    <div class="lbox_close wxapi_form">

      <h3 id="menu-location">123一键导航测试</h3>
      <span class="desc">通过微信内置地图一建导航</span>
      <button class="btn btn_primary" onclick="getLocation()">获取地理位置</button>

      <div style="margin-top: 80px;" class="text-c">
        <button class="btn" style="width: 40%;" onclick="getImg()">获取图片</button>
        <button class="btn btn_purple" style="width: 40%;" onclick="getQrCode()">获取二维码</button>
      </div>
      <div style="margin-top: 20px;" class="text-c">
        <button class="btn btn_green" style="width: 40%;" onclick="getPay()">调微信支付</button>
        <button class="btn btn_orange" style="width: 40%;" onclick="getScan()">扫一扫</button>
      </div>

      <div style="margin-top: 10px;" class="text-c" onclick="getImg()">
        <img id="uploadImg" src="" style="width: 160px; height: 160px;" />
      </div>

      <hr/>
      <div class="tip-box">
        温馨提示：我要如何关闭这么多默认的调试弹框，就在文件夹html/index.html里面找到wx.config，将第一个配置debug: false即可
      </div>

      <div style="border: 2px solid #69f; margin-top: 15px;">
        <p>验证通过的api有:</p>
        <div id="apiList"></div>
      </div>


    </div>
  </div>
  <!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
  <script>

    // 后台返回的配置信息
    let config = {}

    // 获取二维码
    function getQrCode() {
      let data = {
        "expire_seconds": 604800,
        "action_name": "QR_SCENE",
        "action_info": {
          "scene": { "scene_id": 123 }
        }
      }

      let url = '../getQrCode'
      $.ajax({
        type: "POST",
        url,
        data,
        cache: false,
        async: false,
        dataType: 'json',
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (data) {
          console.log('getQrCode-成功--', data);
          // showQrCode(xmlobj)
          let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
          // 这样前端get请求，跳转页面
          window.location.href = url;
        }
      });
    }

    // 展示二维码
    function showQrCode(data) {
      let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`
      $.ajax({
        type: "Get",
        url,
        cache: false,
        async: false,
        dataType: 'json',
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (xmlobj) {
          console.log('QrCode-成功--', xmlobj);
        }
      });
    }

    // 获取地理位置
    function getLocation() {
      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          console.error('location:', res);
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度

          wx.openLocation({
            latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
            longitude: 113.377785, // 经度，浮点数，范围为180 ~ -180。
            name: longitude, // 位置名
            address: '我的地址', // 地址详情说明
            scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: 'http://www.baidu.com/' // 在查看位置界面底部显示的超链接,可点击跳转
          });
        },
        error: (err) => {
          console.error('err', err);
        }
      });
    }

    // 调微信支付
    function getPay() {
      wx.chooseWXPay({
        timestamp: config.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
        package: 'sdfadsf', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: 'asdfad', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
        paySign: 'asdfasd', // 支付签名
        success: function (res) {
          // 支付成功后的回调函数
        }
      });
    }

    // 扫一扫
    function getScan() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          console.log('扫码结果-res：', result);
        }
      });
    }

    // 获取本地图片
    function getImg() {

      function getLocalData(localid) {
        // $('#modal-img').show();
        //获取本地图片资源
        wx.getLocalImgData({
          localId: localid, // 图片的localID
          success: function (res) {
            var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
            console.error("localData:", localData.length)
            uploadImg.setAttribute('src', localData)
            //开始绑定
            return
            $.ajax({
              url: "${pageContext.request.contextPath}/wechat/bindface",
              type: "post",
              data: {
                img: localData
              },
              contentType: 'application/x-www-form-urlencoded;charset=utf-8',
              async: true,
              success: function (data) {
                if ("SUCCESS" == data.code) {
                  location.reload();
                  $("#img").src = "../../img/${openid}.jpg?time=" + Math.random();
                  $("#addBtn").html("更新照片");
                } else {
                  alert("" + data.message);
                }
              },
              complete: function () {
                $('#modal-img').hide();
              }
            })
          }
        });

      }
      // 原文链接：https://blog.csdn.net/qq_23543983/article/details/80438317

      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.error("图像选择结果：", res)
          localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          // 'https://www.baidu.com/img/flexible/logo/pc/result.png'

          getLocalData(localIds[0])
        }
      });
    }


    // 初始化微信js-api
    $().ready(() => {
      // 获取最新的token对象
      let url = '../wx'
      let rel;
      $.ajax({
        type: "get",
        url,
        cache: false,
        async: false,
        dataType: 'json',
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (xmlobj) {
          rel = xmlobj
          console.log('成功--', xmlobj);
        }
      }).responseText;

      console.log('token信息对象: ', typeof rel, rel, rel.length);

      var localIds = '';
      let uploadImg = document.getElementById('uploadImg')

      console.log('wx', wx);

      // 后台返回的配置信息
      config = rel;

      // const config ={
      //   "appId":"wx3680aee5b396cc0f",
      //   "timestamp":1637402688718,
      //   "nonceStr":"5158860791725619",
      //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};
      const jsArr = [
        'chooseWXPay', 'scanQRCode',
        'openLocation', 'updateTimelineShareData', 'chooseImage',
        'getLocation', 'onMenuShareQZone', 'getNetworkType'
      ]
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature,// 必填，签名
        jsApiList: jsArr // 必填，需要使用的JS接口列表
      });

      wx.ready(function (a, b) {
        console.log('read', a, b);

        wx.checkJsApi({
          jsApiList: jsArr, // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function (res) {
            console.error('success--ready--123-456', res);
            let str = $('<div></div>')
            let obj = res.checkResult
            for (const key in obj) {
              if (obj[key]) {
                str.append($(`<p>${key}</p>`))
              }
            }
            $('#apiList').html(str)
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          }
        });
        wx.updateTimelineShareData({
          title: '12', // 分享标题
          link: 'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: '', // 分享图标
          success: function () {
            // 设置成功
            alert('分享成功')
          }
        })
        wx.getNetworkType({
          success: function (res) {
            var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
            alert('networkType:' + networkType)
          }
        });

        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
      });
      wx.error(function (a, b) {
        console.error('error', a, b);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    })

  </script>
</body>

</html>